<template>
  <el-col
    :span="4"
    style="
      background-color: #f5f3f2;
      display: flex;
      justify-content: center;
      padding: 10px;
    "
  >
    <el-row justify="center">
      <el-col style="height: 100px; align-items: center">
        <div style="display: flex; justify-content: center; align-items: center; cursor: pointer;">
          <el-avatar
            :size="60"
            style="margin-right: 20px"
            :src="avatar"
            @click="this.$router.push({ path: '/userInfo' })"
          ></el-avatar>
          <span
            style="width: 100px;"
            v-show="name !== ''"
            @click="this.$router.push({ path: '/userInfo' })"
          >{{ name }}</span>
          <span
            style="width: 100px;"
            v-show="name === ''"
          >
            <span
              style=""
              @click="this.$router.push({ path: '/login' })"
            >未登录</span>
            |
            <span>注册</span>
          </span>
        </div>
        <el-divider></el-divider>
      </el-col>
    </el-row>
  </el-col>
</template>

<script>
export default {
  props: {
    name: String,
    avatar: String,
  },
  data() {
    return {};
  },
};
</script>